import { Form, Input, Button, Checkbox, message } from 'antd';
import axios from 'axios'
import './index.scss'
import logo from '../../assets/images/logo.png'
import {setToken} from '../../utils/token'
const Login = ({history}) => {
  //用户登录主页
  const onFinish = async (values) => {
    console.log('Success:', values);
    const {mobile,code}=values
    try{
      const res= await axios.post('http://geek.itheima.net/v1_0/authorizations',{mobile,code})
   console.log('用户登录',res);
   setToken(res.data.data.token)
   message.success('登录成功',1,()=>{
   history.push('/home')
   })
    }catch(e){
      // console.dir(e);
      message.warning(e.response.data.message,1)
    }
   
  
  }
  return (
    <div className='login'>
      <div className='login-wrapper'>
      <div >
        <img className='login-logo' src={logo} alt="" />
      </div>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{
          remember: true,
          mobile:'13005567303',
          code:'246810'
        }}

        onFinish={onFinish}
      >
        <Form.Item
          name="mobile"
          rules={[
            {
              required: true,
              message: '请输入手机号',
            },
            {
              pattern:/^1[3-9]\d{9}$/,
              message: '手机号格式不正确'
            }
          ]}
        >
          <Input placeholder="请输入手机号码" maxLength={11}/>
        </Form.Item>
        <Form.Item
          name="code"
          rules={[
            {
              required: true,
              message: '请输入验证码',
            },
            {
              pattern:/^\d{6}$/,
              message: '验证码格式不正确'
            }
          ]}
        >
          <Input
            placeholder="请输入验证码"
            maxLength={6}
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="agree" valuePropName="checked" noStyle>
            <Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
          </Form.Item>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button" size='large' block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </div>
    </div>
  )
}
export default Login